<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>组合</title>
</head>
<body>
<button id="invertbtn">invertbtn</button>
<button id="grayscalebtn">grayscalebtn</button>
<canvas id="canvas" width="400" height="800"></canvas>
<div id="color" style="width: 10px; height: 10px;"></div>
<script>
  var img = new Image();
  img.src = './aa.jpeg';
  img.onload = function() {
    draw(this);
  };

  function draw(img) {
    var canvas = document.getElementById('canvas');
    var ctx = canvas.getContext('2d');
    ctx.drawImage(img, 0, 0);
    img.style.display = 'none';
    var imageData = ctx.getImageData(0,0,canvas.width, canvas.height);
    var data = imageData.data;

    var invert = function() {
      for (var i = 0; i < data.length; i += 4) {
        data[i]     = 225 - data[i];     // red
        data[i + 1] = 225 - data[i + 1]; // green
        data[i + 2] = 225 - data[i + 2]; // blue
      }
      ctx.putImageData(imageData, 0, 0);
    };

    var grayscale = function() {
      for (var i = 0; i < data.length; i += 4) {
        var avg = (data[i] + data[i +1] + data[i +2]) / 3;
        data[i]     = avg; // red
        data[i + 1] = avg; // green
        data[i + 2] = avg; // blue
      }
      ctx.putImageData(imageData, 0, 0);
    };

    var invertbtn = document.getElementById('invertbtn');
    invertbtn.addEventListener('click', invert);
    var grayscalebtn = document.getElementById('grayscalebtn');
    grayscalebtn.addEventListener('click', grayscale);
  }
</script>
</body>
</html>